

<template>
    <div class="jh-select" v-if="isShow">
        <div class="curName" v-if="curJh!=''"><span>{{curJh}}</span></div>
        <el-button type="primary" class="block-btn" @click="onChangeJh" round>
            <el-icon class="ico"><Switch /></el-icon>
            选择井
        </el-button>
        <!-- 弹窗 -->
        <el-dialog
            v-model="dialogVisible"
            :title="dialogTitle"
            width="600px"
            custom-class="my-dialog"
            append-to-body
            :before-close="closeDialog"
        >
        <div class="search-box" style="margin-bottom:15px">
            <el-input v-model="searchData.jh" style="width:180px" placeholder="请输入井号" clearable>
            </el-input>
            <el-button style="margin-left:15px" type="primary" :icon="Search">查询</el-button>
        </div>
        <el-table :data="tableData" style="width: 100%" :header-cell-style="thHeaderStyle" height="300">
            <el-table-column label="井号" prop="jh" min-width="100" />
            <el-table-column prop="sjsj" label="设计时间" min-width="100" />
            <el-table-column prop="xgsj" label="修改时间" min-width="100" />
            <el-table-column prop="status" label="设计状态" min-width="80" />
            <el-table-column label="操作" min-width="60">
                <template #default="scope">
                    <el-link type="primary" @click="onSelectJh(scope.row.jh)">选择</el-link>
                </template>
            </el-table-column>
        </el-table>
            <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="dialogVisible = false">
                确认
                </el-button>
            </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import {vue,vsuiapi,mixin} from '@src/assets/core';
const { ref,reactive, computed, onMounted, watch, nextTick} = vue;
const { vsuiRouter, vsuiEventbus } = mixin();
import {ElIcon,ElButton,ElDialog,ElTable,ElTableColumn,ElLink,ElInput} from 'element-plus';
import { Switch } from '@element-plus/icons-vue';

//弹窗
let dialogVisible = ref(false); //弹窗显示隐藏控制
let dialogTitle = ref(""); //等弹窗标题
//关闭弹窗
const closeDialog = () => {
  dialogVisible.value = false;
};
const thHeaderStyle = reactive({
  background:'#e8edfb',
  color:'#000'
});
const searchData = reactive({
  jh:''
});
const onChangeJh = ()=>{
    dialogVisible.value = true;
    dialogTitle.value = '选择井号'
}
let isShow = ref(false);
let tableData = ref([
  {
    sjsj: '2016-05-04',
    xgsj: '2016-05-04',
    jh: '立页2HF',
    status: '正常',
  },
  {
    sjsj: '2016-05-03',
    xgsj: '2016-05-03',
    jh: 'TH_134',
    status: '正常',
  },
  {
    sjsj: '2016-05-02',
    xgsj: '2016-05-02',
    jh: 'TH_138',
    status: '正常',
  },
  {
    sjsj: '2016-05-01',
    xgsj: '2016-05-01',
    jh: 'TH_139',
    status: '正常',
  },
])
let curJh = ref('');
const onSelectJh = (jh)=>{
    curJh.value = jh;
    dialogVisible.value = false;
}
onMounted(() => {
    //isShow.value = router.currentRoute._value.meta.isShowJh;
    
    window.setInterval(() => {
        isShow.value=vsuiRouter.currentRoute._value.meta.isShowJh;
        console.log(vsuiRouter,'vsuiRouter=======================')
    }, 1000 );
});

</script>

<style scoped>
.jh-select{
    padding:8px 10px;
    text-align:center;
    border-bottom:1px solid var(--global-color-assist-2);
}
.curName{
    font-weight:bold;
    font-size:14px;
    color:#263757;
    margin-bottom:5px;
    position:relative;
}
.curName span{
    background:#f2f5fa;
    display:inline-block;
    padding:0 20px;
    position:relative;
    z-index:10;
}
.curName::before{
    content:'';
    position:absolute;
    left:5%;
    top:50%;
    width:90%;
    height:2px;
    background: linear-gradient(to right, #f2f5fa 0%, #7696d8 50%, #f2f5fa 100%);
    z-index:1;
}
:deep(.el-icon){
    --color: inherit;
    height: 1em;
    width: 1em;
    line-height: 1em;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: relative;
    fill: currentColor;
    color: var(--color);
    font-size: inherit;
}

:deep(.el-icon svg) {
    height:1em;
    width:1em;
}
.block-btn{
    
}
.block-btn .ico{
    background:#fff;
    color:var(--global-color-main);
    border-radius:50%;
    margin-right:5px;
    height:1.1em;
    width:1.1em;
}
.el-button{
    display: inline-flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    height: 32px;
    white-space: nowrap;
    cursor: pointer;
    color: var(--el-button-text-color);
    text-align: center;
    box-sizing: border-box;
    outline: none;
    transition: .1s;
    font-weight: var(--el-button-font-weight);
    -webkit-user-select: none;
    user-select: none;
    vertical-align: middle;
    -webkit-appearance: none;
    background-color: var(--el-button-bg-color);
    border: var(--el-border);
    border-color: var(--el-button-border-color);
}
.el-button.is-round {
    border-radius: var(--el-border-radius-round);
    padding: 6px 12px;
}
.el-button--primary {
    --el-button-text-color: var(--el-color-white);
    --el-button-bg-color: var(--el-color-primary);
    --el-button-border-color: var(--el-color-primary);
    --el-button-outline-color: var(--el-color-primary-light-5);
    --el-button-active-color: var(--el-color-primary-dark-2);
    --el-button-hover-text-color: var(--el-color-white);
    --el-button-hover-link-text-color: var(--el-color-primary-light-5);
    --el-button-hover-bg-color: var(--el-color-primary-light-3);
    --el-button-hover-border-color: var(--el-color-primary-light-3);
    --el-button-active-bg-color: var(--el-color-primary-dark-2);
    --el-button-active-border-color: var(--el-color-primary-dark-2);
    --el-button-disabled-text-color: var(--el-color-white);
    --el-button-disabled-bg-color: var(--el-color-primary-light-5);
    --el-button-disabled-border-color: var(--el-color-primary-light-5);
}
:deep(.el-button [class*=el-icon]+span) {
    margin-left: 6px;
}
.el-dialog{
    width:500px;
}
.el-link.el-link--primary {
    --el-link-text-color: var(--el-color-primary);
    --el-link-hover-text-color: var(--el-color-primary-light-3);
    --el-link-disabled-text-color: var(--el-color-primary-light-5);
}
</style>